<template>
    <div class="login">
        <div class="store_header">
            <div class="store_avatar">
                <img src="../../assets/images/avatar_default.png" alt="头像" width="55" height="55">
            </div>
            <div class="store_name">模豆商城</div>
        </div>

        <md-field-group class="boxall">

            <van-field
                    v-model="account"
                    icon="username"
                    placeholder="请输入手机号"
                    right-icon="clear-full"
                    name="user"
                    data-vv-as="帐号"
                    @right-click="clearText"
                    :error-message="errormessage"

            />
            <van-field
                    v-model="password"
                    icon="lock"
                    type="text"
                    :right-icon="visiblePass ? 'eye-open' : 'eye-close'"
                    data-vv-as="密码"
                    name="password"
                    @right-click="visiblePass = !visiblePass"
                    center
                    clearable
                    placeholder="请输入短信验证码"
                    style="border: 1px #f2f2f2"
            >
                <van-button slot="button" size="small" type="primary" :disabled="btnDisabled" plain color="#e55480"
                            @click="captcha()">{{btnText}}
                </van-button>
            </van-field>

            <!--            <div class="clearfix">-->
            <!--                <div class="float-l">-->
            <!--                    <router-link to="/login/registerGetCode">免费注册</router-link>-->
            <!--                </div>-->
            <!--                <div class="float-r">-->
            <!--                    <router-link to="/login/forget">忘记密码</router-link>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--                        <van-button size="large" type="danger" :loading="isLogining" @click="loginSubmit">登录</van-button>-->

        </md-field-group>
        <div class="loginbox">
            <!--            <van-button size="large" type="danger" :loading="isLogining" @click="loginSubmit" class="loginbtn">登录</van-button>-->
            <div class="loginbtn" :disabled="isLogining" @click="loginSubmit">确定</div>
            <van-checkbox v-model="checked" class="read">
                已阅读并同意<span>《用户协议》</span><span>《支付协议》</span><span>《隐私权政策》</span></van-checkbox>
        </div>


        <!--        <div class="text-desc text-center bottom_positon">技术支持: www.coooc.com</div>-->

    </div>
</template>

<script>
    import field from '@/components/field/';
    import fieldGroup from '@/components/field-group/';

    import {authLoginByAccount, getHome} from '@/api/api';
    import {getLocalStorage, setLocalStorage} from '@/utils/local-storage';
    import {emailReg, mobileReg} from '@/utils/validate';

    import {regcaptcha} from '@/api/api';//验证码


    import {Toast} from 'vant';


    export default {
        name: 'login-request',
        components: {
            [field.name]: field,
            [fieldGroup.name]: fieldGroup,
            Toast
        },
        data() {
            return {
                account: '',
                password: '',//验证码
                visiblePass: false,
                isLogining: false,
                userInfo: {},
                checked: false,
                regcaptcha: '',
                errormessage: '',//错误提示
                btnDisabled: false,
                btnText: '获取验证码'
            };
        },
        watch: {
            account(val) {
                //手机号验证
                var reg = /^1[3456789]\d{9}$/;
                if (val != '') {
                    if (reg.test(val)) {
                        this.regcaptcha = true
                        this.errormessage = ''
                    } else {
                        this.errormessage = '手机号格式不正确'
                    }
                }
            }
        },
        methods: {
            clearText() {
                this.account = '';
            },

            validate() {
                if (this.account && this.password) {
                    if (this.checked) {
                        this.login();
                    }else{
                        Toast('请阅读并同意协议')
                    }
                } else {
                    Toast('请检查账号和验证码');
                }
            },

            login() {
                // const {userId} = getLocalStorage('userId');

                authLoginByAccount({
                    mobile: this.account,
                    code: this.password
                }).then(res => {
                    this.userInfo = res.data.data.userInfo;
                    setLocalStorage({
                        mobile: this.account,
                        Authorization: res.data.data.token,
                    });
                    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5b93f2b90f92962d&redirect_uri=' +
                        encodeURIComponent('http://www.moteer.top/#/phoneToCode') + '&response_type=code&scope=snsapi_base&state=' + this.account + '#wechat_redirect'
                    // this.$router.push({name: 'user'})
                }).catch(error => {
                    Toast(error.data.errmsg);
                });
            },

            loginSubmit() {
                this.isLogining = true;
                try {
                    this.validate();
                    this.isLogining = false;
                } catch (err) {
                    console.log(err.message);
                    this.isLogining = false;
                }
            },

            routerRedirect() {
                // const { query } = this.$route;
                // this.$router.replace({
                //   name: query.redirect || 'home',
                //   query: query
                // });
                window.location = '#/user/';
            },

            getLoginData() {
                const password = this.password;
                const account = this.getUserType(this.account);
                return {
                    [account]: this.account,
                    password: password
                };
            },

            getUserType(account) {
                const accountType = mobileReg.test(account)
                    ? 'mobile'
                    : emailReg.test(account)
                        ? 'email'
                        : 'username';
                return accountType;
            },
            captcha() {
                let that = this
                if (this.regcaptcha) {
                    regcaptcha(
                        {
                            mobile: this.account
                        }
                    ).then(res => {
                        that.getSecond(60)
                    }).catch(error => {
                        Toast(error.data.errMsg)
                    });
                }
            },
            getSecond(wait) {
                let _this = this;
                let _wait = wait;
                if (wait == 0) {
                    this.btnDisabled = false;
                    this.btnText = "获取验证码"
                    wait = _wait;
                } else {
                    this.btnDisabled = true;
                    this.btnText = "验证码(" + wait + "s)"
                    wait--;
                    setTimeout(function () {
                            _this.getSecond(wait);
                        },
                        1000);
                }
            }
        }
    };
</script>


<style lang="scss" scoped>
    @import '../../assets/scss/mixin';

    .login {
        position: relative;
        background-color: #F6F6F6;
        padding-top: 30px;
    }

    .store_header {
        text-align: center;
        padding: 30px 0;

        .store_avatar img {
            border-radius: 50%;
        }

        .store_name {
            padding-top: 5px;
            font-size: 16px;
        }
    }

    .register {
        padding-top: 40px;
        color: $font-color-gray;

        a {
            color: $font-color-gray;
        }

        > div {
            width: 50%;
            box-sizing: border-box;
            padding: 0 20px;
        }

        .connect {
            @include one-border(right);
            text-align: right;
        }
    }

    .bottom_positon {
        position: absolute;
        bottom: 30px;
        width: 100%;
    }

    .boxall {
        width: 94%;
        position: relative;
        left: 50%;
        margin-left: -47%;
        background-color: #fff;
        padding: 40px 10px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }

    .loginbox {
        width: 94%;
        position: relative;
        left: 50%;
        margin-left: -47%;
    }

    .loginbtn {
        margin-top: 20px;
        width: 100%;
        line-height: 50px;
        background-color: #E55480;
        border-radius: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
    }

    .loginbox span {
        color: #E55480;
    }

    .read {
        font-size: 12px;
        text-align: center;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>

